<script lang="ts" setup name="Father">
    import { reactive } from 'vue';
    import Category from './Category.vue';

    let videoUrl = '../video/flower.webm';

    let games = reactive([
        { id: 'adgagfa01', name: '英雄联盟' },
        { id: 'adgagfa02', name: '三角洲行动' },
        { id: 'adgagfa03', name: '原神' },
        { id: 'adgagfa04', name: '红色警戒' },
    ]);
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <div class="content">
            <Category title="热门游戏列表">
                <ul>
                    <li v-for="game in games" :key="game.id">{{ game.name }}</li>
                </ul>
            </Category>
            <Category title="今日美食城市">
                <img src="https://z1.ax1x.com/2023/11/19/piNxLo4.jpg"/>
            </Category>
            <Category title="今日影视推荐">
                <video controls :src="videoUrl"></video>
            </Category>
        </div>
    </div>
</template>

<style scoped>
    .father {
        background-color: aliceblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
    .content {
        display: flex;
        justify-content: space-evenly;
    }
    img {
        width: 100%;
    }
    video {
        width: 100%;
    }
</style>